<template>
  <div class="layout layout-100">
    <Layout class="layout-100 modal">
      <Header class="header-cont main__title--top">{{this.$route.params.name}}</Header>
      <Content class="content-cont  modal-content">
        <Tabs value="0" v-if="$route.query.isDestroy !=0" @on-click="tabpaneBtn">
          <TabPane label="风险信息" name="0"  >
            <Collapse v-model="value1" v-if="$route.params.type !== 'details'">
              <Panel name="1">
                风险信息
                <div slot="content">
                  <Form  label-position="top">
                    <Row >
                      <Col span="12">
                        <FormItem label="公司名称">
                          <Input style="width:350px;" v-model.trim="detailData.enterpriseName" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="项目名称" >
                          <Input style="width:350px;" v-model.trim="detailData.projectName" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="工点名称">
                          <Input style="width:350px;" v-model.trim="detailData.constructionPointName" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="工点风险等级">
                          <Input style="width:350px;" v-model.trim="detailData.distRiskGrade"  readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="起始时间">
                          <Input style="width:350px;" v-model.trim="detailData.startTime" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="结束时间">
                          <Input style="width:350px;" v-model.trim="detailData.endTime" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="是否在施">
                          <Input style="width:350px;" v-model.trim="detailData.isWork" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="24">
                        <FormItem label="工点描述">
                          <Input style="width:80%;" type="textarea" v-model.trim="detailData.constructionPointDescription" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="作业风险名称">
                          <Input style="width:350px;" v-model.trim="detailData.riskName" class="width50" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="作业风险类型">
                          <Input style="width:350px;" v-model.trim="detailData.riskCategoryNames" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="作业风险等级">
                          <Input style="width:350px;" v-model.trim="detailData.riskLevelName" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="12">
                        <FormItem label="分级方法">
                          <Input style="width:350px;" v-model.trim="detailData.classificationMethodName" readonly/>
                        </FormItem>
                      </Col>
                      <Col span="24">
                        <FormItem label="具体风险描述">
                          <Input style="width:80%;" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
                        </FormItem>
                      </Col>
                    </Row>
                  </Form>
                </div>
              </Panel>
              <Panel name="2" >
                {{this.$route.params.name}}结果
                <div slot="content">
                  <Form  ref="formData" :model="formData"  :show-message="false" :label-width="120">
                    <FormItem :label="this.$route.params.name+'结果'" prop="riskLevel" :required="true">
                      <RadioGroup v-model="formData.audit">
                        <Radio label="1">通过</Radio>
                        <Radio label="0">驳回</Radio>
                      </RadioGroup>
                    </FormItem>
                    <FormItem :label="this.$route.params.name+'说明'" prop="controlMeasures" :required="true">
                      <Input style="width: 79%"
                             maxlength="500"
                             v-model.trim="formData.description"
                             placeholder="请输入说明"
                             type="textarea"></Input>
                    </FormItem>
                  </Form>
                </div>
              </Panel>
            </Collapse>
            <Form  label-position="top" v-else>
              <Row >
                <Col span="12">
                  <FormItem label="公司名称">
                    <Input style="width:350px;" v-model.trim="detailData.enterpriseName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="项目名称" >
                    <Input style="width:350px;" v-model.trim="detailData.projectName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="工点名称">
                    <Input style="width:350px;" v-model.trim="detailData.constructionPointName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="工点风险等级">
                    <Input style="width:350px;" v-model.trim="detailData.distRiskGrade"  readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="起始时间">
                    <Input style="width:350px;" v-model.trim="detailData.startTime" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="结束时间">
                    <Input style="width:350px;" v-model.trim="detailData.endTime" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="是否在施">
                    <Input style="width:350px;" v-model.trim="detailData.isWork" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="工点描述">
                    <Input style="width:80%;" type="textarea" v-model.trim="detailData.constructionPointDescription" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险名称">
                    <Input style="width:350px;" v-model.trim="detailData.riskName" class="width50" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险类型">
                    <Input style="width:350px;" v-model.trim="detailData.riskCategoryNames" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险等级">
                    <Input style="width:350px;" v-model.trim="detailData.riskLevelName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="分级方法">
                    <Input style="width:350px;" v-model.trim="detailData.classificationMethodName" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="具体风险描述">
                    <Input style="width:80%;" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </TabPane>
          <TabPane label="审批进度" name="1">
            <div class="process-recent">{{ processModel.yourMessage }}</div>
            <Timeline>
              <TimelineItem
                color="blue"
                v-for="(item, index) in processModel.timeline"
                :key="index"
              >
                <Icon type="ios-radio-button-on" slot="dot" />
                <div class="process-container">
                  <h4 class="process-title">
                    {{ item.name }}：<span
                    :class="1 == item.audit ? 'audit--success' : 'audit--danger'" >{{ item.auditName }}</span>
                  </h4>
                  <div class="process-list">
                    <Row
                      :gutter="32"
                      type="flex"
                      v-for="(row, innerIndex) in item.timelineItemDetailsList"
                      :key="innerIndex">
                      <Col :md="8" :lg="5" :xl="4" :xxl="3">
                        <span class="process-name">{{ row.userName }}</span>
                        <span class="process-position" v-if="row.userPost">
                      （{{ row.userPost }}）
                    </span>
                      </Col>
                      <Col>于</Col>
                      <Col>
                        <strong>{{ row.createTime }}</strong>
                      </Col>
                      <Col>
                        <span >进行</span>
                        <strong>{{ row.processName }}</strong>
                      </Col>
                      <Col v-if="index > 0 && row.processName !=='撤销销号' && row.processName !=='发起销号'">
                        审批
                        <strong :class="1 == row.audit ? 'audit--success' : 'audit--danger'">{{ row.auditName }}</strong></Col>
                      <Col v-if="row.textContent !==''">并填写说明：<span>{{ row.textContent }}</span></Col>
                    </Row>
                  </div>
                  <div class="process-angle"></div>
                </div>
              </TimelineItem>
            </Timeline>
          </TabPane>
          <TabPane label="问询回复" name="2">
            <replyInquiries :businessType="businessType" :editModel="detailData"></replyInquiries>
          </TabPane>
        </Tabs>
        <div v-if="$route.query.isDestroy === 0" >
          <Form  label-position="top">
            <Row >
              <Col span="12">
                <FormItem label="公司名称">
                  <Input style="width:350px;" v-model.trim="detailData.enterpriseName" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="项目名称" >
                  <Input style="width:350px;" v-model.trim="detailData.projectName" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="工点名称">
                  <Input style="width:350px;" v-model.trim="detailData.constructionPointName" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="工点风险等级">
                  <Input style="width:350px;" v-model.trim="detailData.distRiskGrade"  readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="起始时间">
                  <Input style="width:350px;" v-model.trim="detailData.startTime" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="结束时间">
                  <Input style="width:350px;" v-model.trim="detailData.endTime" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="是否在施">
                  <Input style="width:350px;" v-model.trim="detailData.isWork" readonly/>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem label="工点描述">
                  <Input style="width:80%;" type="textarea" v-model.trim="detailData.constructionPointDescription" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="作业风险名称">
                  <Input style="width:350px;" v-model.trim="detailData.riskName" class="width50" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="作业风险类型">
                  <Input style="width:350px;" v-model.trim="detailData.riskCategoryNames" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="作业风险等级">
                  <Input style="width:350px;" v-model.trim="detailData.riskLevelName" readonly/>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="分级方法">
                  <Input style="width:350px;" v-model.trim="detailData.classificationMethodName" readonly/>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem label="具体风险描述">
                  <Input style="width:80%;" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Content>
      <Footer class="footer-cont" v-show="$route.params.type !== 'details'">
        <Button type="primary" @click="saveSubmit('formData')">保存</Button>
        <Button @click="closetab">取消</Button>
      </Footer>
    </Layout>
    <Modal v-model="isInquiries" title="业务问询" width="50%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <inquiries ref="isInquiriesBox" :checkedRows="checkedRows" :businessType="businessType" @modelBox="modelBox" @person="person"></inquiries>
      </div>
    </Modal>
    <Modal v-model="personModel" title="选择人" width="80%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <checkPerson @personBox="personBox"></checkPerson>
      </div>
    </Modal>
    <span class="inquiries" @click="replyChild()">{{$route.query.message == true ? '回复' : '问询'}}</span>
  </div>
</template>

<script>
import inquiries from '../../components/modules/inquiries/index'
import checkPerson from '../../components/modules/inquiries/checkPerson'
import replyInquiries from '../../components/modules/inquiries/replyInquiries'
  import { mapMutations } from 'vuex'
  export default {
    components:{
      inquiries,
      checkPerson,
      replyInquiries
    },
    name: "risk-elimination-detail",
    data(){
      return {
        processModel: {},
        recordList:[],
        value1:['1','2'],
        detailData:'',
        personType:JSON.parse(localStorage.getItem('personType')),
        formData:{
          audit :'1',
          description:''
        },
        checkedRows:[],
        businessType:'businesstype_elimination',
        isInquiries:false,
        personModel:false,
      }
    },
    methods:{
      // 调取弹出框
      replyChild(){
        if(this.checkedRows.length == 0){
          this.checkedRows.push(this.detailData)
        }
        if(this.$route.query.message){
          this.$router.push({
            name:'replyInquiries-detail',
            query:{
              source:this.$route.query.source,
              businessType:this.$route.query.businessType,
              objectId:this.$route.query.objectId,
              id:this.$route.query.id,
              riskName:this.$route.query.riskName,
            }
          })
        }else{
          this.isInquiries = true
          this.$refs.isInquiriesBox.isModel()
        }
      },
      // 关闭问询框
      modelBox(){
        this.isInquiries = false
      },
      // 打开人员选择框
      person(){
        this.personModel = true
      },
      // 关闭人员选择框
      personBox(){
        this.personModel = false
      },
      ...mapMutations([
        'closeTag'
      ]),
      closetab () {
        this.closeTag({
          name: this.$route.name,
          params: {...this.$route.params},
          query:{...this.$route.query}
        });
        this.$router.push({path:'/evaluation-number/risk-elimination'})
      },
      getRiskOrderDestroydetail(){//信息详情
        this.$api.riskElimination.getRiskOrderDestroydetail(this.$route.params.id).then(res => {
          if(res.code === 200){
            this.detailData = res.data;
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      getRiskOrderDestroygetProcess(){//审批进度
        this.$api.riskElimination.getRiskOrderDestroygetProcess(this.$route.params.id).then(res => {
          if(res.code === 200){
            this.processModel = res.data;
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      tabpaneBtn(e){//tab切换
        this.formData.isDestroy = e;
        //this.getWbsTabelList();
      },
      //保存
      getRiskOrderDestroydestroyApproval(type){//审核
        let params = {
          "description": this.formData.description,//描述 ,
          "id": this.$route.params.id,//风险id
          "orgType": this.personType,//机构层级， 1集团 2工程公司 3项目部 ,--------需要知道用户的身份
          "type": type,//销号操作类型（1:新增，2:撤销，3:审核，4:签发, 5驳回）
          "audit": this.formData.audit
        }
        this.$api.riskElimination.getRiskOrderDestroydestroyApproval(params).then(res => {
          if(res.code === 200){
            this.$Message.success(res.message);
            this.closetab();
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      getRiskOrderDestroydestroyIssue(type){//签发
        let params = {
          "description": this.formData.description,//描述 ,
          "id": this.$route.params.id,//风险id
          "orgType": this.personType,//机构层级， 1集团 2工程公司 3项目部 ,--------需要知道用户的身份
          "type": type,//销号操作类型（1:新增，2:撤销，3:审核，4:签发, 5驳回）
          "audit": this.formData.audit
        }
        this.$api.riskElimination.getRiskOrderDestroydestroyIssue(params).then(res => {
          if(res.code === 200){
            this.$Message.success(res.message);
            this.closetab();
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      saveSubmit(){
        if(!this.formData.description){
          this.$Message.warning("说明不能为空");
          return;
        }
        if(this.$route.params.type === 'examine'){
          this.getRiskOrderDestroydestroyApproval(3)
        }else {
          this.getRiskOrderDestroydestroyIssue(4)
        }
      },
    },
    mounted() {
      this.getRiskOrderDestroydetail();
      this.getRiskOrderDestroygetProcess();
    }
  };
</script>

<style scoped>
  .width50{
    width: 40%;
  }
</style>
